<template>
  <div class="container">
    <el-card>
      <!-- 表单筛选区域 -->
      <el-form ref="elform" inline>
        <el-form-item label="标题">
          <el-input
            v-model="page.title"
            size="small"
            placeholder="请输入标题"
          />
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="page.cateid" placeholder="请选择分类" size="small">
            <el-option
              v-for="item in list1"
              :key="item.id"
              :value="item.id"
              :label="item.catename"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <template>
            <div class="block">
              <el-date-picker
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="onsubmit"
          >搜索</el-button>
          <el-button size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表单筛选区域 -->

      <!-- 新增按钮区域 -->
      <el-row>
        <el-button type="success" plain size="small" @click="$router.push('/content_article/add')">新增</el-button>
        <el-button type="warning" plain size="small">导出</el-button>
      </el-row>
      <!-- 新增按钮区域 -->

      <!-- 表格渲染 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="ID" width="width" />
        <el-table-column prop="title" label="标题" width="width" />
        <el-table-column prop="catename" label="分类名" width="width" />
        <el-table-column label="图片" width="width">
          <template slot-scope="{row}">
            <img :src="showImgUrl(row.pic)" alt="" width="100px">
          </template>
        </el-table-column>
        <el-table-column prop="create_date" label="创建时间" width="width">
          <template slot-scope="{row}">
            {{ row.create_date | formatDate }}
          </template>
        </el-table-column>
        <el-table-column prop="ishot" label="是否推荐" width="width">
          <template slot-scope="{row}">
            <el-switch
              v-model="row.ishot"
            />
          </template>
        </el-table-column>
        <el-table-column prop="istop" label="是否置顶" width="width">
          <template slot-scope="{row}">
            <el-switch
              v-model="row.istop"
            />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="文章状态" width="width">
          <template slot-scope="{row}">
            <el-button type="primary" plain size="small">{{ row.status === 0 ? '已发布': "待审核" }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="width">
          <template slot-scope="{row}">
            <el-button type="success" plain size="small" @click="$router.push(`/content_article/edit/${row.id}`)">编辑</el-button>
            <el-button :key="row.id" type="warning" plain size="small" @click="delarticleInfoApi(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="tital"
        @current-change="currentChange"
      />
    </el-card>

  </div>
</template>
<script>
// catename
import { getarticleListApi, delarticleInfoApi, getContentCateAllListApi } from '@/api/content'
export default {
  name: 'Actile',
  data() {
    return {

      value: '',
      list: [], // 渲染页面
      list1: [],
      tital: 1, // 页面总数
      page: {
        title: '',
        page: 1,
        cateid: '',
        limit: 10
      }
    }
  },
  created() {
    this.getarticleListApi()
  },
  methods: {
    showImgUrl(url) {
      return process.env.VUE_APP_BASE_API + '/' + url
    },
    // 编辑
    // 分页
    currentChange(node) {
      this.page.page = node
      this.getarticleListApi()
    },
    // 重置
    async reset() {
      this.$refs.elform.resetFields()
      this.page = {
        title: '',
        page: 1,
        cateid: '',
        limit: 10
      }
      await this.getarticleListApi()
    },
    // 搜索
    async onsubmit() {
      this.page.page = 1
      await this.getarticleListApi()
    },
    // 删除
    async delarticleInfoApi(id) {
      await this.$confirm('确定删除吗？')
      await delarticleInfoApi({ id })
      this.$message.success('删除成功')
      this.getarticleListApi()
    },
    // 渲染页面
    async getarticleListApi() {
      const res = await getarticleListApi(this.page)
      const res1 = await getContentCateAllListApi()
      this.list1 = res1
      this.tital = res.count
      this.list = res.data
      console.log(this.list)
    }
  }
}
</script>
<style scoped>
</style>

